import React, { PureComponent, Fragment } from 'react';
import {
    Table,
    Input,
    InputNumber,
    Popconfirm,
    Form,
    Button,
    Divider,
    Tooltip,
    Select,
} from 'antd';
import isEqual from 'lodash/isEqual';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale'

const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
    <EditableContext.Provider value={form}>
        <tr {...props} />
    </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
    getInput = () => {
        return <Input />;
    };

    render() {
        const {
            editing,
            dataIndex,
            title,
            inputType,
            record,
            index,
            max,
            min,
            step,
            ...restProps
        } = this.props;
        return (
            <EditableContext.Consumer>
                {form => {
                    const { getFieldDecorator } = form;
                    return (
                        <td {...restProps}>
                            {editing ? (
                                <FormItem style={{ margin: 0 }}>
                                    {getFieldDecorator(dataIndex, {
                                        rules: [
                                            {
                                                required: true,
                                                message: formatMessage({ id: 'app.tools.pleaseInput' }) + `${title}!`,
                                            },
                                        ],
                                        initialValue: record[dataIndex],
                                    })(this.getInput())}
                                </FormItem>
                            ) : (
                                restProps.children
                            )}
                        </td>
                    );
                }}
            </EditableContext.Consumer>
        );
    }
}

@connect(({ es, hd }) => ({ es, hd }))
class PcSignalStatusForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { editingKey: '' };
        this.columns = [
            {
                title: 'ID',
                dataIndex: 'ID',
                editable: true,
                width: '5%',
                inputType: 'number',
                key: '1',
            },
            {
                title: '信号代码',
                dataIndex: 'SIGNALCODE',
                editable: true,
                width: '10%',
                inputType: 'string',
                key: '2',
            },
            {
                title: '信号描述',
                dataIndex: 'SIGNALDES',
                editable: true,
                width: '50%',
                inputType: 'string',
                key: '3',
            },
            {
                title: '信号值',
                dataIndex: 'SIGNALVALUE',
                editable: true,
                width: '15%',
                inputType: 'string',
                key: '4',
            },
            {
                title: '创建日期',
                dataIndex: 'CREATETIME',
                editable: true,
                width: '20%',
                inputType: 'string',
                key: '5',
            },
        ]
    }
    isEditing = record => record.key === this.state.editingKey;
    newMember = () => {
        if (true) {
            const newData = {
                key: "1",
                pc_data_craft: 5,
                pc_data_manualmaterial: 5,
                pc_data_alarm: 5,
                pc_data_status: 5,
                pc_signal_status: 5,
                eap_signal_status: 5,
                eap_task_data: 5,
                eap_meterial_data: 5,

            };
            const { dispatch } = this.props;
            const newServerEapParams = [newData];
            this.edit(newData.key);
            dispatch({
                type: 'es/addServerEapParams',
                payload: newServerEapParams,
            });
        }
    };

    cancel = () => {
        this.setState({ editingKey: '' });
        const { dispatch } = this.props;
        dispatch({
            type: 'es/getEapParams',
        });
    };
    save(form, key) {
        const { dispatch } = this.props;
        form.validateFields((error, row) => {
            console.log('row', row);
            if (error) {
                return;
            }
            const newData = { ...row, key: "1" };
            this.edit('');
            dispatch({
                type: 'es/saveEapParams',
                payload: newData,
            });
        });
    }

    edit(key) {
        this.setState({ editingKey: key });
    }

    render() {
        const { serverPcSignalStatus } = this.props.es;
        const components = {
            body: {
                row: EditableFormRow,
                cell: EditableCell,
            },
        };

        const columns = this.columns.map(col => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: record => ({
                    record,
                    inputType: col.inputType,
                    dataIndex: col.dataIndex,
                    max: col.max,
                    min: col.min,
                    step: col.step,
                    title: col.title,
                    editing: this.isEditing(record),
                }),
            };
        });

        return (
            <Fragment>
                <Table
                    rowKey={(record, index) => index}
                    bordered
                    components={components}
                    dataSource={serverPcSignalStatus}
                    columns={columns}
                    rowClassName="editable-row"
                    size={'small'}
                />
            </Fragment>
        );
    }
}

export default PcSignalStatusForm;
